<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<style>
		.outer {
			width: 500px;
			height: 500px;
			background-color: #e94444;
		}

		.inner {
			width: 300px;
			height: 300px;
			background-color: #37a555;
		}

		.child {
			width: 100px;
			height: 100px;
			background-color: #5a86e4;
		}
	</style>
</head>

<body>
 <h3>事件流</h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
<div class="outer">
<div class="inner">
 <div class="child"></div>
</div>
</div>

	<script>
		/**
		 * 1. 事件冒泡：当设置相同事件时，会由内到外冒泡
		 * 2. 事件捕获：给监听事件设置第三个属性为true,会又外到内捕获
		 * 3. e.stopPropagation()可以阻止事件向上冒泡
		 */
		// 获取嵌套的3个节点
		const outer = document.querySelector('.outer');
		const inner = document.querySelector('.inner');
		const child = document.querySelector('.child');

		// // html 元素添加事件
		// document.documentElement.addEventListener('click', function () {
		//   console.log('html...')
		// })

		// // body 元素添加事件
		// document.body.addEventListener('click', function () {
		//   console.log('body...')
		// })

		// 外层的盒子添加事件
		outer.addEventListener('click', function () {
			console.log('outer...')
		})

		// 中间的盒子添加事件
		inner.addEventListener('click', function () {
			console.log('inner...')
		})

		// 内层的盒子添加事件
		child.addEventListener('click', function (e) {
			console.log('child...')
			e.stopPropagation()
		})
	</script>
</body>

</html>